<template>
  <view class="lineBox">
    <view class="lineHeadBox" v-if="showHead">
      <!-- 头部可不传 -->
      <view class="lineHead" v-if="!$slots.lineHead">
        {{ item.letter }}
      </view>
      <slot name="lineHead" />
    </view>
    <view class="lineBodyBox">
      <slot name="lineBody" />
    </view>
  </view>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default: () => {
        return {};
      },
    },
    showHead: {
      type: Boolean,
      default: true,
    },
    styles: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      top: 0,
      height: 0,
    };
  },
  options: {
    styleIsolation: 'shared',
    virtualHost: true,
  },

  methods: {
    getDomInfo(selector, all) {
      // 可一次查多个元素selectAll
      return new Promise((resolve) => {
        uni
          .createSelectorQuery()
          .in(this)
          [all ? 'selectAll' : 'select'](selector)
          .boundingClientRect((rect) => {
            if (all && Array.isArray(rect) && rect.length) {
              resolve(rect);
            }
            if (!all && rect) {
              resolve(rect);
            }
          })
          .exec();
      });
    },
  },
  created() {
    // #ifndef VUE3
    // #ifdef  MP
    // 小程序 v2 层级不同
    this.$parent.$parent.children.push(this);
    return;
    // #endif
    // #endif

    // #ifdef APP-PLUS || MP
    this.$parent.children.push(this);
    // #endif

    // #ifdef H5
    this.$parent.$parent.$parent.children.push(this);
    // #endif
  },
  mounted() {
    this.$nextTick(async () => {
      const res = await this.getDomInfo('.lineBox');
      this.height = res.height;
      this.top = res.top;
    });
  },
};
</script>

<style lang="scss" scoped>
.lineBox {
  width: 100%;

  .lineHeadBox {
    position: sticky;
    top: 0;
    // background: w;
    z-index: 55;
    padding: 10rpx 0;
    background: #f5f5f5;

    .lineHead {
      padding: 0 20rpx;
      box-sizing: border-box;
    }
  }
}
</style>
